<script lang="ts" setup name="stockIncomeEdit">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getStorehouseList, getInventoryGoodsList, getWaresCategoryList } from "@/api/modules/inventory";
import { getYMD } from "@/utils/date";
import ProTable from "@/components/ProTable/index.vue";
import SelectTreeData from "@/components/SelectTreeData/index.vue";
import { inventory } from "@/api/interface";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";

const router = useRouter();
const route = useRoute();

const documentStatus = ref("add");
onMounted(() => {
  getHouseList();

  if (route.query?.id) {
    documentStatus.value = "edit";
  } else {
    documentStatus.value = "add";
  }
});

// 获取仓库
const houseList = ref<any[]>([]);
const getHouseList = async () => {
  const { data } = await getStorehouseList();
  houseList.value = data.list;
  data.list.forEach(e => {
    if (e.isDefault) stockIncomeForm.value.houseId = e.id;
  });
};

const propTable: ProTableInstance = ref();
const stockIncomeForm = ref({
  remark: "",
  dateType: 2, //1是盘点2是损益
  orderNo: "",
  orderId: 0,
  range: 1,
  createTime: getYMD(),
  houseId: "",
  corecmsinventorydetail: []
});

const column: ColumnProps<inventory.ResStockIncomeList>[] = [
  { type: "index", label: "序号", width: 60 },
  { prop: "operate", label: "操作", width: 100 },
  { prop: "barcode", label: "编码", minWidth: 220 },
  { prop: "name", label: "名称", minWidth: 140 },
  { prop: "realQuantity", label: "盘点数量", minWidth: 140 },
  { prop: "planQuantity", label: "账面数量", minWidth: 120 },
  { prop: "costPrice", label: "成本价", minWidth: 120 },
  { prop: "costAmount", label: "库存金额", minWidth: 120 },
  { prop: "profitLossQuantity", label: "盈亏数量", minWidth: 100 },
  { prop: "profitLossAmount", label: "盈亏金额", minWidth: 100 },
  { prop: "productName", label: "分类", minWidth: 100 },
  { prop: "unitName", label: "单位", minWidth: 120 }
];

// 打开表格
interface dialogProps {
  title: string;
  isView: boolean;
  selType?: string;
  selTags?: any[];
  columns?: any[];
  idName: string;
  index?: number;
  searchVal?: string | number;
  mate?: string;
  apiParams?: {};
  api?: (params: any) => Promise<any>;
  treeApi?: (params: any) => Promise<any>;
}
const selectTreeForm = ref();
const openSelectTreeTable = (title: string, searchVal: string | number) => {
  if (!stockIncomeForm.value.houseId) return ElMessage.error("请先选择仓库");
  const params: dialogProps = {
    title,
    isView: false,
    searchVal,
    index: 0,
    mate: "productsId",
    selTags: stockIncomeForm.value?.corecmsinventorydetail
      .filter(age => age.goodsId !== 0)
      .map(i => {
        i.name = i.name;
        i.id = i.productsId;
        return i;
      }),
    columns: [
      { type: "selection", width: 80 },
      { prop: "barcode", label: "编码", align: "left", minWidth: 220 },
      { prop: "name", label: "商品名称", align: "left", minWidth: 220 },
      { prop: "productName", label: "规格", align: "left", minWidth: 100 },
      { prop: "unitName", label: "单位", align: "left", minWidth: 100 },
      // { prop: "posPrice", label: "商品价格", minWidth: 120 }
      { prop: "purPrice", label: "采购价格", minWidth: 120 }
    ],
    apiParams: { houseId: stockIncomeForm.value.houseId },
    idName: "goodsCategoryId",
    // 发请求
    treeApi: getWaresCategoryList,
    api: getInventoryGoodsList
  };
  selectTreeForm.value?.acceptParams(params);
};
const handleSelectList = e => {
  // 选中弹出层数据
  console.log(e);
};
</script>

<template>
  <div class="table-box card">
    <div class="ed-head">
      <span class="title">{{ documentStatus === "edit" ? "修改" : documentStatus === "add" ? "新增" : "" }}损益单</span>
      <el-icon class="pointer" @click="router.go(-1)"><CloseBold /></el-icon>
    </div>

    <el-form label-width="120px" inline :model="stockIncomeForm" :rules="incomeRules" ref="ruleFormRef">
      <el-form-item label="单据号">
        <el-input class="”width160" disabled placeholder="系统自动生成" :rows="1"> </el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="stockIncomeForm.createTime" class="”width160" :rows="1"> </el-date-picker>
      </el-form-item>
      <el-form-item label="仓库">
        <el-select
          class="width160"
          placeholder="请选择仓库"
          :disabled="documentStatus === 'audited'"
          :rows="1"
          v-model="stockIncomeForm.houseId"
        >
          <el-option v-for="item in houseList" :value="item.id" :label="item.name" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          :disabled="documentStatus === 'audited'"
          v-model="stockIncomeForm.remark"
          class="”width160"
          :rows="1"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <ProTable
      ref="propTable"
      :columns="column"
      :data="stockIncomeForm.corecmsinventorydetail"
      :pagination="false"
      :is-card="false"
      :tool-button="documentStatus !== 'audited'"
    >
      <template #tableHeader>
        <el-button
          v-if="documentStatus !== 'audited' && stockIncomeForm.range === 1"
          type="primary"
          @click="openSelectTreeTable('选择商品')"
        >
          添加商品明细
        </el-button>
      </template>

      <template #toolButton>
        <el-button v-if="documentStatus !== 'audited'" type="primary" @click="onSubmit"> 保存 </el-button>
        <el-button v-if="documentStatus !== 'audited'" @click="router.go(-1)"> 取消 </el-button>
      </template>
    </ProTable>

    <SelectTreeData ref="selectTreeForm" @selected-list="handleSelectList"></SelectTreeData>
  </div>
</template>

<style lang="scss" scoped></style>
